<template>
	<a-row :gutter="24">
		<a-col :span="8">
			<a-card>
				<div class="card-body">
					<Shop class="icon" theme="filled" size="100" />
					<div class="b-row">
						<span class="title">拥有小店数量</span>
						<span>共<span class="strong">{{data.shop_count}}</span>个</span>
					</div>
				</div>
				<div class="card-footer">
					统计时间段：{{data.shop_start_time}} - {{data.shop_end_time}}
				</div>
			</a-card>
		</a-col>
		<a-col :span="8">
			<a-card>
				<div class="card-body">
					<ChartHistogramTwo class="icon" theme="filled" size="100"/>
					<div class="b-row">
						<span class="title">小店累计销售额</span>
						<span class="strong">￥{{data.sales_amount}}</span>
					</div>
				</div>
				<div class="card-footer">
					统计时间段：{{data.amount_start_time}} - {{data.amount_end_time}}
				</div>
			</a-card>
		</a-col>
		<a-col :span="8">
			<a-card>
				<div class="card-body">
					<FinancingOne class="icon" theme="filled" size="100"/>
					<div class="b-row">
						<span class="title">累计获得佣金</span>
						<span class="strong">￥{{data.bonus_amount}}</span>
					</div>
				</div>
				<div class="card-footer">
					统计时间段：{{data.amount_start_time}} - {{data.amount_end_time}}
				</div>
			</a-card>
		</a-col>
	</a-row>
</template>

<script lang="ts">
import { onMounted } from 'vue'
import Controller from './controller'
export default {
	setup(){
		var controller=new Controller()

		onMounted(()=>{
			controller.getMethods().getData()
		})

		return {
			...controller.getState(),
			...controller.getMethods()
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';
.ant-card{
	border-radius: 8px;
}
.card-body{
	display: flex;
	.icon{
		color: $theme-color;
	}
	.b-row{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20px;
		padding: 6px 0;
		.title{
			font-size: 22px;
			color: #444;
		}
		.strong{
			font-size: 24px;
			color: $theme-color;
			padding: 0 4px;
		}
	}
}
.card-footer{
	font-size: 14px;
	color: #777;
	margin-top: 20px;
}
</style>
